<template>
  <view class="course-detail-container">
    <view class="cover_image" v-if="!isFinite">
      <image :src="videofrequency.cover_image_url" />
      <view @click="play" class="play">
        <image src="/static/images/play@2x.png" />
        <text>播放课程简介</text>
      </view>
    </view>
    <view class="course_video" v-else>
      <video :src="videofrequency.course_video_url"></video>
    </view>
    <!-- 2.0 简介 -->
    <view class="introduction">
      <view class="title-price">
        <text>{{ videofrequency.title }}</text>
        <text>￥{{ videofrequency.price }}.00</text>
      </view>
      <text class="introduce">{{ videofrequency.introduction }}</text>
      <view class="star">
        <van-rate
          :value="videofrequency.score"
          size="15px"
          color="#fe8e38"
          void-color="#fe8e38"
        />

        <!-- <van-rate
          readonly
          color="#fe8e38"
          void-color="#fe8e38"
          size="15"
          :value="course_detail.course.score"
        /> -->
        <!-- <star :score="course_detail.course.score" /> -->
        <text>{{ videofrequency.study_count }}人在学</text>
      </view>
      <view class="study-share">
        <image @click="goToPlay" src="/static/images/start_study@2x.png" />

        <button class="share-button" open-type="share"></button>

        <!-- <button open-type="share" class="share-button"></button> -->
      </view>

     
      </view>
    <!-- 菜单项渲染 -->
      <view class="catalog">
        <view class="head">
          <text
            :class="{ active: selectedIndex === index }"
            v-for="(item, index) in menus"
            :key="item"
            @click="toggleSelect(index)"
            >{{ item }}</text
          >
          <text v-if="!course_detail.videos"
            >暂无课程视频哦，请联系客服添加</text
          >
        </view>
           <!-- 渲染课程目录 -->
      <view v-if="selectedIndex === 0" class="catelog-container">
        <text v-for="(item, index) in course_detail.videos" :key="item.id">
          {{ index + 1 }}.{{ item.name }}
        </text>
      </view>
       <!-- 讲师的头像和昵称 -->
        <view v-else-if="selectedIndex === 1" class="lecturer-container">
        <view class="info">
          <image :src="course_detail.lecturer.avatar" />
          <view class="name-follow">
            <text>{{ course_detail.lecturer.name }}</text>
            <text>关注人数{{ course_detail.lecturer.follow_count }}</text>
          </view>
            <!-- is_follow    0：未关注 1：已关注 -->
            <text :class="[course_detail.lecturer.is_follow=== 1 ? 'follow' : 'unfollow']"
             @click="
              followOrUnFollow(
                course_detail.lecturer.is_follow,
                course_detail.lecturer.id
              )
            "
            >
{{course_detail.lecturer.is_follow==1?'已关注':'未关注'}}
            </text>
          </view>
               <!-- 讲师的简介 -->
        <view class="introduce">
          <text>{{ course_detail.lecturer.introduction }}</text>
        </view>
        <text
          style="color:#636363;font-size:15px;"
          v-if="!course_detail.lecturer"
          >暂无讲师简介哦~</text
        >
      </view>

      <view v-else-if="selectedIndex === 2" class="comment-container">
        <view
          class="comment-item"
          v-for="item in course_detail.comments"
          :key="item.id"
        >
          <view class="info">
            <image :src="item.avatar" />
            <view class="nickname-content">
              <view class="nickname">
                <view style="margin-top:12rpx;"
                  >{{ item.nickname }}&nbsp;&nbsp;</view
                >
                <view style="margin-left:20rpx;">
                   <van-rate
          :value="item.score"
          size="15px"
          color="#fe8e38"
          void-color="#fe8e38"
        />
                 
                </view>
              </view>
              <view>{{ item.content }}</view>
            </view>
            <text class="time">
              {{ item.comment_time }}
            </text>
          </view>
            <view class="star">
            <!-- is_like 1 不喜欢  2 喜欢 -->
            <image
              @click="likeOrUnlike(item)"
              :src="
                item.is_like == 1
                  ? '/static/images/like_normal@2x.png'
                  : '/static/images/like_highlight@2x.png'
              "
            />
               </view>
          </view>
  </view>
  </view>
   </view>
</template>

<script>
import request from "../utils/util";
export default {
  data() {
    return {
      course: null, //跳转过来的id
      videofrequency: null, //播放详情
      course_detail: null,
      selectedIndex: 0,
      menus: ["目录", "讲师介绍", "评价"],
    };
  },
  onLoad(options) {
    console.log(options);

    this.course = options.id;
    this.getCourseData();
  },
  //这个函数在框架里   return的值会放到分享里
  onShareAppMessage(obj) {
    console.log(obj);

    // 这里面要返回的内容，就是你要自定义的内容
    return {
      title: "课程详情",
      imageUrl:
        "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2570150957,2647810153&fm=26&gp=0.jpg",
    };
  },
  methods: {
    async getCourseData() {
      console.log(this.course);
      const res = await request({
        url: `course/${this.course}`,
      });
      console.log(res);
      this.videofrequency = res.data.message.course;
      this.course_detail = res.data.message;

      this.menus[2] = `评价(${res.data.message.commentTotal})`;
    },
    play() {
      this.isFinite = true;
    },
    toggleSelect(index) {
      this.selectedIndex = index;
    },
    //关注  未关注
    async followOrUnFollow(is_follow, lecturer_id) {
      // is_follow 0：未关注 1：已关注
      // console.log(is_follow, lecturer_id)
      switch (is_follow) {
        case 0: {
          // 之前未关注，现在需要关注
          const res = await request({
            url: "/lecturer/follow",
            method: "POST",
            data: {
              lecturer_id,
            },
          });

          uni.showToast({
            title: res.data.message,
            icon: "none",
            duration: 1000,
          });

          // 把状态设置为1
          this.course_detail.lecturer.is_follow = 1;

          break;
        }

        case 1: {
          // 之前关注过，再次点击应该取消关注
          // 之前未关注，现在需要关注
          const res = await request({
            url: "/lecturer/unfollow",
            method: "POST",
            data: {
              lecturer_id,
            },
          });

          uni.showToast({
            title: res.data.message,
            icon: "none",
            duration: 1000,
          });

          // 把状态设置为0
          this.course_detail.lecturer.is_follow = 0;

          break;
        }

        default:
          break;
      }
    },
    // 对某个评论点赞或是取消点赞
    async likeOrUnlike(item) {
      // item.is_like 的值  1：不喜欢 2：喜欢
      switch (item.is_like) {
        case 1: {
          // 之前不喜欢，现在喜欢
          const res = await request({
            url: "comment/like",
            method: "POST",
            data: {
              comment_id: item.id,
              is_like: 2,
            },
          });

          item.is_like = 2;

          break;
        }
        case 2: {
          // 之前喜欢，现在不喜欢
          const res = await request({
            url: "comment/like",
            method: "POST",
            data: {
              comment_id: item.id,
              is_like: 1,
            },
          });

          item.is_like = 1;
          break;
        }
        default:
          break;
      }
    },
    goToPlay(){
      console.log(111)
      uni.navigateTo({
         url: `/pages/play/index?id=${this.course}`
      });
    }
  },
};
</script>

<style lang="less" scoped>
.course-detail-container {
  background-color: #efefef;
  position: relative;
  .cover_image {
    width: 750rpx;
    height: 434rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 750rpx;
      height: 434rpx;
    }
    position: relative;
    .play {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      position: absolute;
      image {
        width: 164rpx;
        height: 164rpx;
      }
      text {
        margin-top: 10rpx;
        color: #e9e9e9;
        font-size: 30rpx;
      }
    }
  }
  .course_video {
    width: 750rpx;
    height: 434rpx;
    video {
      width: 750rpx;
      height: 434rpx;
    }
  }
  .introduction {
    z-index: 3;
    position: absolute;
    margin-top: 0rpx;
    border-radius: 16px 16px 0px 0px;
    left: 0;
    right: 0;
    height: 452rpx;
    background-color: #ffffff;
    padding: 20rpx 30rpx;
    .title-price {
      margin-top: 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      text:nth-child(1) {
        font-size: 24px;
        color: #343434;
        font-weight: Bold;
      }
      text:nth-child(2) {
        font-size: 22px;
        color: #ee3939;
      }
    }
    .introduce {
      color: #818181;
      font-size: 12px;
      margin-top: 100rpx;
    }
    .star {
      display: flex;
      margin-top: 20rpx;
      text {
        height: 50rpx;
        line-height: 50rpx;
        margin-left: 20rpx;
        font-size: 12px;
        color: #fe8e38;
      }
    }
    .study-share {
      margin-top: 42rpx;
      margin-bottom: 52rpx;
      image:nth-child(1) {
        width: 568rpx;
        height: 92rpx;
      }
      .share-button {
        border: none;
        width: 92rpx;
        height: 92rpx;
        background-color: #fff;
        border-radius: 10rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        float: right;
        background-image: url(../../static/images/share@2x.png);
        background-repeat: no-repeat;
        background-size: 34rpx 34rpx;
        background-position: 30rpx 30rpx;
      }
    }
  }
  .catalog {
    margin-top: 520rpx;
    // position: absolute;
    z-index: 5;
    width: 750rpx;
    // height: 582rpx;
    background-color: #ffffff;
    .head {
      height: 120rpx;
      background-color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #f5f5f5;
      text {
        text-align: center;
        color: #a8a8a8;
        font-size: 14px;
        height: 120rpx;
        line-height: 120rpx;
        flex: 1;
        position: relative;
      }
      .active {
        color: #333333;
        font-weight: bold;
        &::after {
          content: "";
          position: absolute;
          left: 88rpx;
          bottom: 0px;
          width: 74rpx;
          height: 3px;
          background-color: #ff8e43;
        }
      }
    }
    .catelog-container {
      padding: 30rpx;
      height: 582rpx;
      text {
        background-color: #ffffff;
        color: #636363;
        font-size: 30rpx;
        height: 80rpx;
        line-height: 80rpx;
        display: block;
      }
    }
    .lecturer-container {
      padding: 30rpx;
      .info {
        height: 200rpx;
        display: flex;
        align-items: center;
        .name-follow {
          margin-left: 30rpx;
          display: flex;
          flex-direction: column;
          flex: 1;
          text:nth-child(1) {
            font-size: 34rpx;
            color: #333333;
          }
          text:nth-child(2) {
            font-size: 28rpx;
            margin-top: 15rpx;
            color: #a8a8a8;
          }
        }
        image {
          margin-left: 12rpx;
          width: 120rpx;
          height: 120rpx;
        }
        .unfollow {
          width: 136rpx;
          height: 52rpx;
          line-height: 52rpx;
          text-align: center;
          border: 1px solid #a8a8a8;
          border-radius: 26rpx;
          color: #a8a8a8;
          font-size: 28rpx;
        }
        .follow {
          width: 136rpx;
          height: 52rpx;
          line-height: 52rpx;
          text-align: center;
          border: 1px solid #a8a8a8;
          border-radius: 26rpx;
          color: #fff;
          background-color: #a8a8a8;
          font-size: 28rpx;
        }
      }
      .introduce {
        background-color: #ffffff;
        text {
          margin-left: 12rpx;
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 20px;
          color: rgba(168, 168, 168, 1);
          opacity: 1;
        }
      }
    }
    .comment-item {
      background-color: #ffffff;
      padding: 30rpx;
      height: 180rpx;
      border-bottom: 2px solid #f1f1f1;
      .info {
        height: 120rpx;
        display: flex;
        align-items: center;
        image {
          margin-left: 6rpx;
          width: 96rpx;
          height: 96rpx;
          border-radius: 50%;
        }
        .nickname-content {
          flex: 1;
          margin-left: 30rpx;
          .nickname {
            color: #333333;
            font-size: 30rpx;
            font-weight: bold;
            align-items: center;
            display: flex;
            view {
              height: 100%;
              display: inline-block;
            }
          }
          view:nth-child(2) {
            margin-top: 16rpx;
            color: #a8a8a8;
            font-size: 12px;
          }
        }
        .time {
          color: #a8a8a8;
          font-size: 11px;
        }
      }
    }
    .star {
      image {
        margin-top: 30rpx;
        width: 44rpx;
        height: 44rpx;
        float: right;
        margin-right: 20rpx;
      }
      image:nth-child(0) {
        margin-right: 20rpx;
      }
    }
  }
}
</style>

